<div id="intro_songList">
<div class="songList">
    <div class="song-body">

        <div class="st">
            <h3>全部</h3>
            <a id="choice-click" href="#" @click.prevent="isShow()">
                <span>选择分类<em></em></span>
            </a>
            <a href="javascript:void(0);">热门</a>
        </div>

        <div class="first-body">
            <ul>
                <li v-for="playlist in pageInfo.list">
                    <div>
                        <a :href="'/music_platform/pages/playList_detail.html?plid='+playlist.plid">
                            <img style="width: 100px" v-if="playlist.pic" :src="'/music_platform'+playlist.pic" alt="">
                            <img v-else src="upload/song01.jpg" alt="">
                            <div>
                                <span>{{playlist.subscription_count}}万</span>
                                <a href="#"></a>
                            </div>
                        </a>
                    </div>
                    <p><a href="#">{{playlist.plname}}</a></p>
                    <p><a href="#"><span v-for="cate in playlist.categories">{{cate.cname}}</span></a></p>
                    <span>by</span>
                    <p><a href="#">{{playlist.userInfo.username}}</a></p>
                </li>

            </ul>
        </div>

        <div class="box-footer">
            <div class="pull-left">
                <div class="form-group form-inline">
                    总共 {{pageInfo.pages}} 页，共 {{pageInfo.total}} 条数据。 每页20条
                </div>
            </div>

            <div class="box-tools pull-right">
                <ul class="pagination">
                    <li>
                        <a @click.prevent="loadPageInfo(pageInfo.navigateFirstPage)" aria-label="Previous">首页</a>
                    </li>
                    <li><a @click.prevent="loadPageInfo(pageInfo.pageNum-1)">上一页</a></li>
                    <li v-for="index in pageInfo.pages" :class="{active: pageInfo.pageNum == index}">
                        <a @click.prevent="loadPageInfo(index)">{{index}}</a>
                    </li>
                    <li><a @click.prevent="loadPageInfo(pageInfo.pageNum+1)">下一页</a></li>
                    <li>
                        <a @click.prevent="loadPageInfo(pageInfo.navigateLastPage)" aria-label="Next">尾页</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

        <div v-show="isShowRight" @mouseleave="isShowFalse" class="choice">
            <div class="choice-t"><i></i></div>

            <div class="choice-body">
                <div><a href="#">全部风格</a></div>

                <dl>
                    <dt><i class="dt-i-1"></i>语种</dt>
                    <dd>
                        <a v-for="lan in languages" href="#" @click.prevent="loadPageInfo(1,lan.cname)">{{lan.cname}} | </a>
                    </dd>
                </dl>

                <dl>
                    <dt><i class="dt-i-2"></i>风格</dt>
                    <dd>
                        <a v-for="playlist in styles" href="#" @click.prevent="loadPageInfo(1,playlist.cname)">{{playlist.cname}} | </a>
                    </dd>
                </dl>

            </div>

            <div class="choice-b"></div>
        </div>

    </div>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script>
     new Vue({
        el:"#intro_songList",
        data:{
            pageInfo:{},
            isShowRight:false,
            styles:[],
            languages:[]
        },
        methods:{
            loadPageInfo(pageNum,category){
                const _this = this;
                axios.get("/music_platform/playlist/findByCa",{
                    params:{
                        pageNum:pageNum,
                        category:category
                    }
                }).then(function (response) {
                    _this.pageInfo = response.data
                })
            },
            isShow(){
                this.isShowRight = !this.isShowRight
            },
            loadStyles(){
                const _this = this;
                axios.get("/music_platform/cate/lan").then(function (response) {
                    _this.languages = response.data
                })
            },
            loadLanguages(){
                const _this = this;
                axios.get("/music_platform/cate/sty").then(function (response) {
                    _this.styles = response.data
                })
            },
            isShowFalse(){
                this.isShowRight = false;
            }
        },
        created:function () {
            this.loadPageInfo(1);
            this.loadStyles();
            this.loadLanguages();
        }
    })
</script>